<template>
  <div class="app-container">
    <el-row>
      <el-form
        :model="actFlashSale"
        :rules="rules"
        ref="actFlashSale"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-divider content-position="left"
          ><legend class="divider-line">基本信息</legend></el-divider
        >
        <el-col :span="20">
          <el-form-item label="活动名称：">
            <div class="yxkj-word-black">
              {{ actFlashSale.actFlashSaleName }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="活动日期：">
            <div class="yxkj-word-black">{{ actFlashSale.actDate }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="应用渠道：">
            <div class="yxkj-word-black">
              {{ codeBox.CHANNEL[actFlashSale.channel] }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="状态：">
            <div class="yxkj-word-black">
              {{ codeBox.FLASH_SALE_STATUS[actFlashSale.status] }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="申请规则：">
            <div class="yxkj-word-black">{{ actFlashSale.auditRule }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="活动描述：">
            <div class="yxkj-word-black">{{ actFlashSale.remark }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="作废原因" prop="auditOpinion">
            <el-input
              type="textarea"
              :rows="3"
              v-model="actFlashSale.auditOpinion"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-divider content-position="left"
          ><legend class="divider-line">商品列表</legend></el-divider
        >

        <el-col :span="24" style="margin-bottom: 60px;">
          <el-table :data="dataList" border style="width: 100%">
            <el-table-column
              property="actTime"
              width="150"
              label="秒杀时间段"
            ></el-table-column>
            <el-table-column
              property="productName"
              width="400"
              label="商品"
            ></el-table-column>
            <el-table-column
              property="sellerName"
              width="200"
              label="申请商家"
            ></el-table-column>
            <el-table-column
              property="mallPcPrice"
              width="200"
              label="原价"
            ></el-table-column>
            <el-table-column
              property="price"
              width="150"
              label="价格"
            ></el-table-column>
            <el-table-column
              property="stock"
              width="150"
              label="库存"
            ></el-table-column>
            <el-table-column
              property="actualSales"
              width="150"
              label="销量"
            ></el-table-column>
            <el-table-column property="status" width="150" label="状态">
              <template slot-scope="scope">
                {{ codeBox.FLASH_PRODUCT_STATUS[scope.row.status] }}
              </template>
            </el-table-column>
            <el-table-column
              property="sort"
              width="150"
              label="排序"
            ></el-table-column>
            <el-table-column
              property="auditOpinion"
              width="200"
              label="审核意见"
            ></el-table-column>
            <el-table-column
              property="auditTime"
              width="200"
              label="审核时间"
            ></el-table-column>
            <el-table-column
              property="createTime"
              width="200"
              label="创建时间"
            ></el-table-column>
          </el-table>
        </el-col>

        <el-row :gutter="24">
          <div class="fixed-bottom-20">
            <el-button type="primary" @click="submitForm('actFlashSale')"
              >立即提交</el-button
            >
            <el-button type="success" @click="back">返回</el-button>
          </div>
        </el-row>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import {
  detailActFlashSale,
  listActFlashSaleProduct,
  doabolishActFlashSale
} from "@/api/promotion.js";
import { Message } from "element-ui";
import { getCodeManager, codeToArray } from "@/api/all";
export default {
  name: "actflashsaleaudit",
  data() {
    return {
      id: "",
      channels: [],
      actFlashSale: {},
      dataList: [],
      dialogFormVisible: false,
      actFlashSaleProduct: {},
      rules: {
        auditOpinion: [
          { required: true, message: "请输入作废原因", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.id = this.$route.query.id;
    getCodeManager("CHANNEL,FLASH_PRODUCT_STATUS", () => {
      this.channels = codeToArray("CHANNEL");
    });
    detailActFlashSale({ actFlashSaleId: this.id }).then(res => {
      this.actFlashSale = res.data.data.actFlashSale;
    });
    this.getList();
  },
  methods: {
    back() {
      history.back();
    },
    getList() {
      listActFlashSaleProduct({ actFlashSaleId: this.id }).then(res => {
        this.dataList = res.data.rows;
      });
    },
    submitForm(actFlashSale) {
      this.$refs[actFlashSale].validate(valid => {
        if (valid) {
          let actFlashSaleNew = {
            id: this.actFlashSale.id,
            auditOpinion: this.actFlashSale.auditOpinion
          };
          doabolishActFlashSale(actFlashSaleNew).then(res => {
            if (!res.data.success) {
              Message.error(res.data.message);
              return;
            }
            Message.success("操作成功");
            history.back();
          });
        }
      });
    }
  }
};
</script>
<style scoped>
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/ .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/deep/ [class*="el-col-"] {
  float: none;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.add_norm {
  display: flex;
}
.add_norm .el-form-item {
  width: 35%;
}
.add_norm .el-button {
  height: 36px;
  margin-left: 15px;
}

.el-divider {
  margin: 30px 0;
}
.divider-line {
  font-size: 20px;
  font-weight: 300;
}
</style>
